<template>
  <div class="app-container home">
    <div class="title">控制面板</div>
    <div style="display: flex;cursor: pointer;">
      <div class="top-head-layout" style="background: #39cccc" @click="clickHead(0)">
        <div class="top-head-main-txt">{{ totalReport.asset_num }}</div>
        <div class="top-head-two-txt">资产</div>
      </div>
      <div class="top-head-layout" style="background: #d81b60" @click="clickHead(1)">
        <div class="top-head-main-txt">{{ totalReport.license_num }}</div>
        <div class="top-head-two-txt">许可证</div>
      </div>
      <div class="top-head-layout" style="background: #ff851b" @click="clickHead(2)">
        <div class="top-head-main-txt">{{ totalReport.accessory_num }}</div>
        <div class="top-head-two-txt">附属品</div>
      </div>
      <div class="top-head-layout" style="background: #605ca8" @click="clickHead(3)">
        <div class="top-head-main-txt"> {{ totalReport.consumable_num }}</div>
        <div class="top-head-two-txt">消耗品</div>
      </div>
      <div class="top-head-layout" style="background: #f39c12" @click="clickHead(4)">
        <div class="top-head-main-txt">{{ totalReport.component_num }}</div>
        <div class="top-head-two-txt">组件</div>
      </div>
      <div class="top-head-layout" style="background: #3c8dbc" @click="clickHead(5)">
        <div class="top-head-main-txt">{{ totalReport.user_num }}</div>
        <div class="top-head-two-txt">用户</div>
      </div>
    </div>

    <el-row>
      <el-col :span="16" style="padding:5px">
        <div style="height:335px;overflow-y: auto;" class="border">
          <div class="title">分类统计</div>
          <el-table :data="categoryTotalList" stripe size="mini">
            <el-table-column label="分类名称" width="180" align="left" prop="name" />
            <el-table-column label="类型" width="100" align="left" prop="category_type" />
            <el-table-column label="资产数量" align="left" prop="asset_num" />
            <el-table-column label="组件数量" align="left" prop="consumable_num" />
            <el-table-column label="许可证数量" align="left" prop="license_num" />
            <el-table-column label="附属品数量" align="left" prop="accessory_num" />
            <el-table-column label="消耗品品数量" align="left" prop="accessory_num" />
          </el-table>
        </div>
      </el-col>
      <el-col :span="8" style="padding: 5px;">
        <div class="border">
          <div class="title">按状态显示</div>
          <PieChart v-if="pieData.length>0" :legend="legend" :pie-data="pieData" title="资产状态数量"></PieChart>
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 5px; padding: 5px;">
      <div class="border">
        <div class="title">用户资产</div>
        <el-table :data="userCheckoutList" stripe size="mini">
          <el-table-column label="用户姓名" width="200" align="left" prop="name" />
          <el-table-column label="用户电话" width="200" align="left" prop="mobile" />
          <el-table-column label="用户邮箱" width="200" align="left" prop="email" />
          <el-table-column label="所属部门" width="200" align="left" prop="deptname" />
          <el-table-column label="资产数量" align="left" prop="asset_num" />
          <el-table-column label="许可证数量" align="left" prop="license_num" />
          <el-table-column label="附属品数量" align="left" prop="accessory_num" />
          <el-table-column label="消耗品品数量" align="left" prop="accessory_num" />
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import { getTotalReport, getUserCheckoutReport, getCategoryTotalReport, getAssetStatusReport } from "@/api/vadmin/report/index";
import PieChart from "./dashboard/PieChart.vue";
export default {
  name: "Index",
  components: { PieChart },
  data() {
    return {
      // 版本号
      version: "1.1.1",
      totalReport: {
        "asset_num": 2,
        "component_num": 1,
        "license_num": 2,
        "accessory_num": 2,
        "consumable_num": 1,
        "user_num": 2
      },
      userCheckoutList: [],
      categoryTotalList: [],
      legend: [],
      pieData: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    clickHead(tag) {
      switch (tag) {
          case 0:
            if (this.$route.path !== "/assets/assets") {
              this.$router.push({ path: "/assets/assets", query: {}});
            }
            break;
          case 1:
            if (this.$route.path !== "/assets/licenses") {
              this.$router.push({ path: "/assets/licenses", query: {}});
            }
            break;
          case 2:
            if (this.$route.path !== "/assets/accessories") {
              this.$router.push({ path: "/assets/accessories", query: {}});
            }
            break;
          case 3:
            if (this.$route.path !== "/assets/consumables") {
              this.$router.push({ path: "/assets/consumables", query: {}});
            }
            break;
          case 4:
            if (this.$route.path !== "/assets/components") {
              this.$router.push({ path: "/assets/components", query: {}});
            }
            break;
          case 5:
            if (this.$route.path !== "/permission/user") {
              this.$router.push({ path: "/permission/user", query: {}});
            }
            break;
      }
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    loadData() {
      getTotalReport().then(res => {
        this.totalReport = res.data;
      });
      getCategoryTotalReport().then(res => {
        this.categoryTotalList = res.data.results;
      });
      getUserCheckoutReport({ pageNum: 1, pageSize: 5 }).then(res => {
        this.userCheckoutList = res.data.results;
      });
      getAssetStatusReport().then(res => {
        this.pieData.length = 0;
        const map = {
          pending: "待处理",
          deployable: "可部署",
          undeployable: "不可部署",
          arched: "已存档",
          deleted: "已删除"
        };
        for (const k in map) {
          this.legend.push(map[k]);
        }
        res.data.forEach(item => {
          this.pieData.push({
            name: map[item.status],
            value: item.num
          });
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    .title{
      font-size: 18px;
      color: #333333;
      font-weight: bold;
      padding: 5px;
    }
    .border{
      border: 1px solid #ececec;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  .top-head-layout{
    display: flex;
    flex: 1;
    background: #1ab394;
    margin: 12px;
    flex-direction: column;
    align-items: center;
  }
  .top-head-main-txt{
    color: white;
    font-size: 32px;
    margin-top: 15px;
    font-weight: bold;
  }
  .top-head-two-txt{
    color: white;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 15px;
  }
</style>

